<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <div class="banner">
      <el-carousel height="400px" class="banner-carousel">
        <el-carousel-item v-for="(item, index) in banners" :key="index">
          <div class="banner-item">
            <el-image :src="item.url" fit="contain" style="width: 100%; height: 100%;"></el-image>
            <div class="banner-content">
              <h2>{{ item.title }}</h2>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="section">
      <div class="section-header">
        <h2>公告</h2>
      </div>
      <div class="notice-list">
        <el-card v-for="(item, index) in noticeList" :key="index" class="notice-item" shadow="hover">
          <div class="notice-title">{{ item.title }}</div>
          <div class="notice-content">{{ item.content }}</div>
          <div class="notice-footer">
            <span class="notice-time">{{ parseTime(item.createTime) }}</span>
            <el-tag size="small" :type="item.status === 1 ? 'success' : 'danger'">
              {{ item.status === 1 ? '正常' : '关闭' }}
            </el-tag>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 热门职位推荐 -->
    <div class="section">
      <div class="section-header">
        <h2>热门职位</h2>
        <el-button type="text" @click="$router.push('/jobs')">查看更多</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="job in hotJobs" :key="job.id">
          <el-card class="job-card" shadow="hover" @click.native="handleJobClick(job)">
            <div class="job-header">
              <div class="job-info">
                <div class="job-title">{{ job.title }}</div>
                <div class="job-company">{{ job.company }}</div>
                <div class="job-salary">{{ job.salary }}</div>
                <div class="job-tags">
                  <el-tag size="small" v-for="tag in job.tags" :key="tag">{{ tag }}</el-tag>
                </div>
              </div>
              <el-image :src="job.image" class="job-image"></el-image>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 推荐企业 -->
    <div class="section company-section">
      <div class="section-header">
        <h2>推荐企业</h2>
        <el-button type="text">查看更多</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="company in companies" :key="company.id">
          <el-card class="company-card" shadow="hover" @click.native="handleCompanyClick(company)">
            <img :src="company.logo" class="company-logo">
            <div class="company-name">{{ company.name }}</div>
            <div class="company-desc">{{ company.description }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 求职攻略 -->
    <div class="section">
      <div class="section-header">
        <h2>求职攻略</h2>
        <el-button type="text">查看更多</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="article in articles" :key="article.id">
          <el-card class="article-card" shadow="hover">
            <img :src="article.cover" class="article-cover">
            <div class="article-title">{{ article.title }}</div>
            <div class="article-desc">{{ article.description }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getNoticeList } from "@/api";

export default {
  name: 'Home',
  data() {
    return {
      searchText: '',
      banners: [
        {
          url: 'https://storage-public.zhaopin.cn/information/team/public/1744879484191244399/9e04ee2e205afd47e7092645cc54406.jpg',
          title: '',
          description: ''
        },
        {
          url: 'https://storage-public.zhaopin.cn/information/team/public/1745198787220946632/%25E6%25A0%25A1%25E5%259B%25AD%25E9%2592%25BB%25E7%259F%25B3%25E8%25BD%25AE%25E6%2592%25AD200k.jpg',
          title: '优质企业',
          description: '汇聚行业顶尖企业'
        },
        {
          url: 'https://storage-public.zhaopin.cn/information/team/public/1740990399983091214/pc-banner.jpg',
          title: '职业发展',
          description: '助力你的职业梦想'
        },
        {
          url: 'https://storage-public.zhaopin.cn/information/team/public/1745465506899860761/1808-840.jpg',
          title: '校园招聘',
          description: '为应届生提供优质机会'
        }
      ],
      hotJobs: [
        {
          id: 1,
          title: '前端开发工程师',
          company: '腾讯科技',
          salary: '15k-25k',
          image: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/yd2021031755000300.jpg',
          tags: ['深圳', '3年经验', '本科'],
          website: 'https://careers.tencent.com/zh-cn/search.html'
        },
        {
          id: 2,
          title: 'Java开发工程师',
          company: '阿里巴巴',
          salary: '20k-35k',
          image: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.rJN_GeK5BREjkt818suvKAHaHa?rs=1&pid=ImgDetMain',
          tags: ['杭州', '5年经验', '本科'],
          website: 'https://talent.alibaba.com/off-campus/position-list'
        },
        {
          id: 3,
          title: '产品经理',
          company: '字节跳动',
          salary: '25k-45k',
          image: 'https://logo800.cn/uploads/logoxinshang/56/logo800_16491624083325586.png',
          tags: ['北京', '3年经验', '本科'],
          website: 'https://jobs.bytedance.com/experienced/position'
        },
        {
          id: 4,
          title: 'UI设计师',
          company: '华为',
          salary: '15k-30k',
          image: 'https://images.sj33.cn/uploads/202210/7-221010132443a3.jpg',
          tags: ['杭州', '3年经验', '本科'],
          website: 'https://career.huawei.com/reccampportal/portal5/campus-recruitment.html'
        }
      ],
      companies: [
        {
          id: 1,
          name: '腾讯科技',
          logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/yd2021031755000300.jpg',
          description: '互联网科技公司',
          website: 'https://www.tencent.com'
        },
        {
          id: 2,
          name: '阿里巴巴',
          logo: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.rJN_GeK5BREjkt818suvKAHaHa?rs=1&pid=ImgDetMain',
          description: '电子商务平台',
          website: 'https://talent.alibaba.com/'
        },
        {
          id: 3,
          name: '字节跳动',
          logo: 'https://logo800.cn/uploads/logoxinshang/56/logo800_16491624083325586.png',
          description: '内容科技公司',
          website: 'https://jobs.bytedance.com/'
        },
        {
          id: 4,
          name: '网易',
          logo: 'https://www.sj51.net/wp-content/uploads/2023/11/2023112616251599.png',
          description: '互联网科技公司',
          website: 'https://hr.163.com/'
        }
      ],
      articles: [
        {
          id: 1,
          title: '应届生求职指南',
          cover: 'https://static-cse.canva.cn/blob/247923/23123123123143211236.png',
          description: '教你如何准备简历和面试'
        },
        {
          id: 2,
          title: '面试技巧大全',
          cover: 'https://ts2.tc.mm.bing.net/th/id/OIP-C.SGo-cl2T2xQ3QNoAdqqeYwAAAA?rs=1&pid=ImgDetMain',
          description: '常见面试问题及回答技巧'
        },
        {
          id: 3,
          title: '职场新人指南',
          cover: 'https://pic.huke88.com/video/cover/2018-05-17/2EBC4373-5D66-01DC-CFE9-79F30D3C6E21.jpg!/fwfh/1840x1124/quality/80/unsharp/true/format/jpg',
          description: '如何快速适应职场生活'
        }
      ],
      noticeList: []
    }
  },
  created() {
    this.getNoticeList();
  },
  methods: {
    parseTime(time) {
      if (!time) return '';
      const date = new Date(time);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getNoticeList() {
      getNoticeList({
        currPage: 1,
        pageSize: 3,
        status: 1  // 只显示正常状态的公告
      }).then(response => {
        this.noticeList = response.data.list;
      });
    },
    handleJobClick(job) {
      console.log('点击了职位:', job);
      if (job && job.website) {
        console.log('准备跳转到:', job.website);
        window.open(job.website, '_blank');
      }
    },
    handleCompanyClick(company) {
      console.log('点击了公司:', company);
      if (company && company.website) {
        console.log('准备跳转到:', company.website);
        window.open(company.website, '_blank');
      }
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.banner-carousel {
  width: 100%;
}

.banner-item {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.banner-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 18px;
}

.search-section {
  max-width: 600px;
  margin: 0 auto 40px;
}

.search-input {
  width: 100%;
}

.section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.job-card {
  margin-bottom: 20px;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.job-card:hover::before {
  transform: translateX(100%);
}

.job-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
}

.job-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.job-card:hover .job-image {
  transform: scale(1.1);
}

.job-info {
  flex: 1;
  min-width: 0;
}

.job-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #303133;
  transition: color 0.3s ease;
}

.job-card:hover .job-title {
  color: #409EFF;
}

.job-company {
  color: #606266;
  margin-bottom: 5px;
  font-size: 14px;
  transition: color 0.3s ease;
}

.job-card:hover .job-company {
  color: #303133;
}

.job-salary {
  color: #f56c6c;
  margin-bottom: 8px;
  font-weight: 500;
  transition: transform 0.3s ease;
}

.job-card:hover .job-salary {
  transform: scale(1.05);
}

.job-tags .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.job-card:hover .job-tags .el-tag {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409EFF;
}

.company-card {
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.company-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.company-card:hover::before {
  transform: translateX(100%);
}

.company-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  border-radius: 8px;
  background: white;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-card:hover .company-logo {
  transform: scale(1.1);
}

.company-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #303133;
  transition: color 0.3s ease;
}

.company-card:hover .company-name {
  color: #409EFF;
}

.company-desc {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.company-card:hover .company-desc {
  color: #303133;
}

.article-card {
  margin-bottom: 20px;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.article-card:hover::before {
  transform: translateX(100%);
}

.article-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 8px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.article-card:hover .article-cover {
  transform: scale(1.05);
}

.article-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #303133;
  transition: color 0.3s ease;
  padding: 0 15px;
}

.article-card:hover .article-title {
  color: #409EFF;
}

.article-desc {
  color: #606266;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color 0.3s ease;
  padding: 0 15px;
  line-height: 1.5;
}

.article-card:hover .article-desc {
  color: #303133;
}

.company-section {
  background: #f0f2f5;
  padding: 30px;
  border-radius: 12px;
  margin: 30px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.section-header h2 {
  font-size: 24px;
  color: #303133;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.section-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #409EFF;
  border-radius: 2px;
}

.section-header .el-button {
  color: #409EFF;
  font-size: 14px;
  padding: 0;
}

.notice-list {
  margin-top: 20px;
}

.notice-item {
  margin-bottom: 15px;
}

.notice-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.notice-content {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.notice-time {
  color: #909399;
}
</style>